<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Nesting Styles 嵌套样式</title>
    <style>
        /* 父子关系，选择所有p元素，其中div是父元素，p是子元素，parent */
        div>p {
            background-color: blue;
        }
        /* 包含关系，选择所有div内的p元素,inside */   
        div p {
            background-color: gray;
        }
        /* 兄弟关系，选择紧跟着div的p元素 ,immediately*/
        div+p {
            background-color: brown;
        }
        /*兄弟关系，选择前面有div的p元素 */
        div~p {
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <h1>Welcome to the page</h1>
    <div>
        <p>this is paragraph 1</p>
        <p>this is paragraph 2</p>
    </div>
    <hr/>
    <div>
        <p>this is paragraph 3</p>
        <p>this is paragraph 4</p>
        <span>
            <p>this is paragraph 5</p>
            <p>this is paragraph 6</p>
        </span>
    </div>
    <p>this is paragraph 7</p>
    <p>this is paragraph 8</p>
</body>

</html>